<template>
    <view class="main">
        <!-- 遮罩 -->
        <scroll-view scroll-y="false" class="mask" v-if="isShow" @click="closeMask">
            <image class="mask-invit-QR" :src="user.qrCode"></image>
        </scroll-view>
        <!-- 空白页 -->
        <view class="w100 flex-column align-center padding-column20 fixed-auto" v-if="isUserList">
            <image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png"
                style="width: 256rpx; height: 256rpx;"></image>
            <text style="color: #81868e;">暂无邀请信息</text>
        </view>
        <!-- 卡片 -->
        <view class="top-card">
            <view class="invite-number-text">已邀请的用户数</view>
            <view class="invite-number">{{ inviteNumber }}</view>
            <!-- 二维码 -->
            <image class="invite-QR" :src="user.qrCode" @click="clickQR"></image>
        </view>
        <!-- 搜索框 -->
        <view class="query-input-box">
            <!-- 下拉选择器 -->
            <view class="select-type">
                <!-- 下拉选择器 -->
                <picker mode="selector" :range="typeList" range-key="label" :value="selectIndex" @change="onTypeChange">
                    <!-- 显示内容 -->
                    <view class="picker-content">
                        {{ typeList[selectIndex].label }}
                    </view>
                </picker>
            </view>
            <!-- 搜索图标 -->
            <image class="input-icon"
                src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/image/fangdajing28608.png">
            </image>
            <!-- 搜索框 -->
            <input class="query-input" placeholder="搜索用户" @change="queryInvite" />
        </view>
        <!-- 用户列表 -->
        <view class="user-card" v-for="(item, index) in userList" :key="index">
            <view class="user-register-time">注册时间：{{ item.registerTime }}</view>
            <view class="user-type">{{ item.type }}</view>
            <view class="Divider"></view>
            <view class="user-info">
                <view style="padding: 1rpx; margin-left: 40rpx">
                    <image class="user-icon"
                        src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/image/user3228561.png">
                    </image>
                </view>
                <view class="user-name"> {{ item.name }}</view>
                <view class="user-phone">{{ item.phone }}</view>
                <button class="user-phone-button" :data-phone-number="item.phone" @click="makePhoneCall">
                    <view class="button-text">拨打电话</view>
                </button>
            </view>
        </view>
        <view class="no-more" v-if="noMore">没有更多数据了</view>
    </view>
</template>
<script>
import {
  mapState
} from "vuex"
export default {
    // 数据
    data() {
        return {
            // 用户ID
            userId: "",
            // 邀请人数
            inviteNumber: 0,
            // 遮罩
            isShow: false,
            // 查询
            selectIndex: 0,
            // 二维码
            QR: "",
            typeList: [
                {
                    label: "全部",
                    value: "全部",
                },
                {
                    label: "游客",
                    value: "游客",
                },
                {
                    label: "会员",
                    value: "会员",
                },
                {
                    label: "银牌",
                    value: "银牌",
                },
                {
                    label: "金牌",
                    value: "金牌",
                }
            ],
            // 用户列表
            userList: [
                {
                    name: "张三",
                    phone: "13182901197",
                    type: "游客",
                    registerTime: "2023-03-01",
                },
                {
                    name: "李四",
                    phone: "13182901197",
                    type: "会员",
                    registerTime: "2023-03-01",
                },
                {
                    name: "王五",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "李四四四四四四",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "王五",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "赵六",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "孙七",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "周八",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "吴九",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "郑十",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
                {
                    name: "王十一",
                    phone: "13781211197",
                    type: "金牌",
                    registerTime: "2023-03-01",
                },
            ],
            // 空白背景判断
            isUserList: false,
            // 没有更多数据的判断
            noMore: true,
        };
    },
    computed: {
    ...mapState({
      user: state => state.user
    })
  },

    // 生命周期
    onLoad() {
        this.getUserId();
        // this.getQR();
        // this.getUserList();
    },

    methods: {
        // 获取当前用户ID
        getUserId() {
            console.log("用户ID", this.$store.state.user.id);
            this.userId = this.$store.state.user.id;
        },
        // 获取数据
        async getUserList(userId) {
            const res = await this.$request("/aiet-user-center/user/invite/list", { userId: userId }, "GET");
            if (res.code === 200) {
                this.inviteNumber = res.data.length;
                this.userList = res.data;
                console.log("用户列表res.data", res.data);
                console.log("用户列表this.userList", this.userList);
                // 控制背景和底部提示显示
                if (this.userList.length === 0) {
                    this.isUserList = true;
                    this.noMore = false;
                } else {
                    this.noMore = true;
                }
            }
        },
        // 获取QR码
        async getQR(userId) {
            const res = await this.$request("/aiet-user-center/user/invite/qr", { userId: userId }, "GET");
            if (res.code === 200) {
                this.QR = res.data;
            }
        },
        // 下拉框查询
        onTypeChange: function (e) {
            console.log("picker发送选择改变携带值为", e.detail.value);
            // const res = this.$request("/aiet-user-center/user/invite/query", { mobile: e.detail.value }, "GET");
            // if (res.code === 200) {
            //     this.inviteList = res.data
            // }
            this.selectIndex = e.detail.value
        },
        // 输入框查询
        queryInvite: function (e) {
            console.log("输入框输入内容：" + e.detail.value);
            // const res = this.$request("/aiet-user-center/user/invite/query", { mobile: e.detail.value }, "GET");
            // if (res.code === 200) {
            //     this.inviteList = res.data
            // }
        },
        // 拨打电话
        makePhoneCall: function (event) {
            const phoneNumber = event.currentTarget.dataset.phoneNumber;
            wx.makePhoneCall({
                phoneNumber: phoneNumber,
                success: function () {
                    console.log("拨打电话成功");
                },
                fail: function (err) {
                    console.error("拨打电话失败", err);
                },
            });
        },
        // 点击二维码打开遮罩层
        clickQR() {
            this.isShow = true;
        },
        // 关闭遮罩层
        closeMask() {
            this.isShow = false;
        },
    },
};
</script>
<style>
.main {
    width: 100%;
    height: 100vh;
    /* background-color: #f5f5f5; */
    padding-top: 1rpx;
}

/* 邀请卡片 */
.top-card {
    width: 90%;
    height: 20%;
    background-color: rgb(248, 195, 41);
    border-radius: 15rpx;
    margin: 30rpx auto 0 auto;
    padding: 1rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
        inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
    margin-bottom: 30rpx;
}

/* 邀请人数文本 */
.invite-number-text {
    padding-top: 1rpx;
    display: inline-block-block;
    margin-top: 40rpx;
    font-size: 35rpx;
    color: white;
    margin-left: 30rpx;
}

/* 邀请人数 */
.invite-number {
    display: flex;
    color: white;
    font-size: 80rpx;
    margin-top: 20rpx;
    margin-left: 55rpx;
}

/* 二维码 */
.invite-QR {
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    background-color: white;
    margin-top: -137rpx;
    margin-left: 60%;
}

/* 搜索框盒子 */
.query-input-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 筛选框 */
.select-type {
    z-index: 2;
    width: 20%;
    height: 60rpx;
    background-color: white;
    border-radius: 15rpx;
    font-size: 25rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
        inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
    padding-top: 10rpx;
    margin: 0;
}

/* 选择内容 */
.picker-content {
    width: 100%;
    text-align: center;
    font-size: 25rpx;
}

/* 输入框图标 */
.input-icon {
    position: absolute;
    z-index: 2;
    width: 40rpx;
    height: 40rpx;
    /* background-color: lightgray; */
    margin-left: -231rpx;
    /* border-radius: 20rpx; */
}

/* 搜索框 */
.query-input {
    width: 55%;
    height: 60rpx;
    border-radius: 15rpx;
    background-color: white;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
        inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
    padding-left: 70rpx;
    margin-left: 30rpx;
}

/* 用户卡片 */
.user-card {
    width: 90%;
    height: 12%;
    background-color: white;
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
        inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
    margin: 20rpx auto 0 auto;
    padding: 1rpx;
}

/* 用户注册时间 */
.user-register-time {
    display: inline-block;
    margin-top: 20rpx;
    margin-left: 40rpx;
}

/* 用户类型 */
.user-type {
    display: inline-block;
    margin-top: 20rpx;
    margin-left: 250rpx;
}

/* 分割线 */
.Divider {
    width: 90%;
    height: 1rpx;
    /* background-color: black; */
    margin: 15rpx auto 20rpx auto;
    border: 1rpx dashed lightgray;
}

/* 用户信息 */
.user-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 用户图标 */
.user-icon {
    width: 43rpx;
    height: 43rpx;
    /* 渐变背景色 */
    /* background-image: linear-gradient(-135deg, #fff, #ffcc80); */
    /* background-color: red; */
    /* margin-left: -40rpx; */
    border-radius: 50%;
}

/* 用户名称 */
.user-name {
    width: 165rpx;
    display: inline-block;
    font-size: 30rpx;
    font-weight: bold;
    color: black;
    /* 禁止换行 */
    white-space: nowrap;
    /* 隐藏超出部分 */
    overflow: hidden;
    /* 文本溢出显示省略号 */
    text-overflow: ellipsis;
    margin-left: 10rpx;
}

/* 用户手机号 */
.user-phone {
    width: 175rpx;
    display: inline-block;
    font-size: 25rpx;
    font-weight: bold;
    color: black;
    margin-left: 75rpx;
}

/* 按钮伪元素 */
.user-phone-button::after {
    border: 0;
}

/* 拨打电话按钮 */
.user-phone-button {
    display: inline-block;
    width: 120rpx;
    height: 50rpx;
    font-size: 22rpx;
    color: rgb(248, 195, 41);
    background-color: white;
    border-radius: 25rpx;
    border: 2rpx solid rgb(248, 195, 41);
    padding: 1rpx;
    margin-left: 10rpx;
    display: grid;
    place-items: center;
}

/* 拨打电话按钮中文本 */
.button-text {
    font-size: 24rpx;
    color: rgb(248, 195, 41);
    display: inline-block;
    margin-top: -7rpx;
}

/* 遮罩层 */
.mask {
    position: fixed;
    display: flex;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

/* 遮罩层二维码 */
.mask-invit-QR {
    width: 500rpx;
    height: 500rpx;
    background-color: white;
}

/* 无更多数据 */
.no-more {
    width: 200rpx;
    height: 100rpx;
    display: flex;
    margin: 20rpx auto;
}
</style>
